<template>
  <div class="tree-search-container">
    <!-- 搜索输入框 -->
    <div class="group">
      <div class="search-icon"><svg t="1748935036065" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="6477" width="40" height="40">
          <path
            d="M469.333333 768c-166.4 0-298.666667-132.266667-298.666666-298.666667s132.266667-298.666667 298.666666-298.666666 298.666667 132.266667 298.666667 298.666666-132.266667 298.666667-298.666667 298.666667z m0-85.333333c119.466667 0 213.333333-93.866667 213.333334-213.333334s-93.866667-213.333333-213.333334-213.333333-213.333333 93.866667-213.333333 213.333333 93.866667 213.333333 213.333333 213.333334z m251.733334 0l119.466666 119.466666-59.733333 59.733334-119.466667-119.466667 59.733334-59.733333z"
            fill="#ffffff" p-id="6478"></path>
        </svg></div>
      <div><input v-model="searchQuery" placeholder="请输入关键词搜索..." class="search-input" /></div>

    </div>

    <!-- 树形结构展示 -->
    <div class="tree">
      <TreeNode v-for="node in filteredTree" :key="node.id" :node="node" :search-query="searchQuery"
        v-model="node.expanded" @node-click="handleNodeClick" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineEmits } from 'vue';
import TreeNode from './TreeNode.vue';
const emit = defineEmits(['node-selected-rsj']);
function handleNodeClick(node) {
  // if (!node.expanded) {
  // 如果未展开，则设置 expanded 为 true
  node.expanded = !node.expanded;
  // }
  console.log('点击的节点:', node);

  // console.log('点击的节点:', node);
  emit('node-selected-rsj', node);
  // 在这里可以做任何你想做的操作：
  // - 获取节点 ID：node.id
  // - 高亮节点
  // - 发送请求加载子级数据
  // - 跳转页面等
}

//矩阵12
//机柜18

// 示例数据
const treeData = ref([
  {
    "id": 1,
    "label": "机柜1-1",
    children: []
  },
  {
    "id": 2,
    "label": "机柜1-2", children: []
  },
  {
    "id": 3,
    "label": "单元1101", children: []
  },
  {
    "id": 4,
    "label": "核心交换机", children: []
  },
  {
    "id": 5,
    "label": "光交箱-A01", children: []

  },
  {
    "id": 6,
    "label": "配线架-B02", children: []

  },
  {
    "id": 7,
    "label": "动力机房-D03", children: []

  },
  {
    "id": 8,
    "label": "安全网关-S04", children: []

  },

]);
// 搜索关键词
const searchQuery = ref('');

// 过滤后的树结构
const filteredTree = computed(() => {
  if (!searchQuery.value) return treeData.value;

  const query = searchQuery.value.toLowerCase();

  // 递归过滤函数
  function filterNode(node) {
    const isMatched = node.label.toLowerCase().includes(query);
    const filteredChildren = node.children
      .map(child => filterNode(child))
      .filter(child => child !== null);

    if (isMatched || filteredChildren.length > 0) {
      return {
        ...node,
        expanded: true,
        matched: isMatched,
        children: filteredChildren
      };
    }

    return null;
  }

  return treeData.value.map(filterNode).filter(Boolean);
});


// defineEmits(['node-selected']); // ✅ 显式声明事件
</script>

<style scoped>
.tree-search-container {
  padding: 1rem;
  height: 50vh;
}

.search-input {
  border-radius: 50px;
  width: 100%;
  padding: 0.5rem;
  border: 5px solid #ffffff;
  background-color: rgba(255, 250, 240, 0);
  /* border-radius: 4px; */
  transform: all 1000m;
  font-family: 600;
  color: #ffffff;
}

.search-input:hover {
  width: 100%;
}

.tree-node {
  cursor: pointer;
  padding-left: 1rem;
}

.search-icon {
  /* position: absolute;
  left: 0;
  top: 0; */
}

.group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.tree {
  overflow: auto;
  height: 100%;
}

::-webkit-scrollbar {
  display: none;
}
</style>